package com.inepex.graphicstests.client.canvas;

import com.google.gwt.animation.client.Animation;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.FlowPanel;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.RootPanel;
import com.inepex.inegraphics.impl.client.canvas.CanvasWidget;

public class CanvasWidgetScaleTest extends Composite {
	private static final double height = 600;
	private class ContextScaleAnimation extends Animation{
		@Override
		protected void onUpdate(double progress) {
			canvas1.clearRect(0, 0, 600, 600);
			canvas1.setTransform(1, 0, 0, 1 - progress, 0, height * progress / 2);
			generatePath(canvas1);
		}
		
	}
	private class CssScaleAnimation extends Animation{
		@Override
		protected void onUpdate(double progress) {
			canvas2.getElement().getStyle().setProperty("transform", "scale(1,"+ (1 - progress) +")");
			canvas2.getElement().getStyle().setProperty("MsTransform", "scale(1,"+ (1 - progress) +")");
			canvas2.getElement().getStyle().setProperty("MozTransform", "scale(1,"+ (1 - progress) +")");
			canvas2.getElement().getStyle().setProperty("WebkitTransform", "scale(1,"+ (1 - progress) +")");
			canvas2.getElement().getStyle().setProperty("OTransform", "scale(1,"+ (1 - progress) +")");
		}
		
	}
	private Grid mainPanel = new Grid(1, 2);
	private CanvasWidget canvas1;
	private CanvasWidget canvas2;
	
	public CanvasWidgetScaleTest() {
		canvas1 = new CanvasWidget(600, 600);
		canvas2 = new CanvasWidget(600, 600);
		mainPanel.setWidget(0, 0, canvas1);
		mainPanel.setWidget(0, 1, canvas2);
		initWidget(mainPanel);
		RootPanel.get().add(this);
	}
	
	@Override
	protected void onLoad() {
		setContext();
		generatePath(canvas1);
		generatePath(canvas2);
		new ContextScaleAnimation().run(5000);
		new CssScaleAnimation().run(5000);
	}
	
	void setContext(){
		canvas1.setLineWidth(3.0);
		canvas1.setStrokeStyle("blue");
		canvas2.setLineWidth(3.0);
		canvas2.setStrokeStyle("red");
	}
	
	void generatePath(CanvasWidget canvas){
		canvas.beginPath();
		for(int i = 0; i < 100; i++){
			canvas.lineTo(i * 6, 300 + Math.sin(i * 6) * 300);
		}
		canvas.stroke();
	}
}
